<template>
    <!-- #ifndef H5 -->
    <view
        class="navigationBar"
        :style="{
            paddingTop: statusHeight + 'px',
            position: fixed ? 'fixed' : 'sticky',
        }"
        :class="
            bgType === 1 ? 'whiteBgColor' : bgType === 2 ? 'themeBgColor' : ''
        "
    >
        <image
            v-if="bgType === 3"
            class="bgImg"
            :src="getImageURL('navigationBar/top_bg.png')"
            mode="widthFix"
        />
        <image
            v-if="bgType === 4"
            class="bgImg"
            :src="getImageURL('technician/technician/top_bg.png')"
            mode="widthFix"
        />
        <view
            class="navigation-left flex align-center just-center"
            v-if="backType !== 0"
            @click.stop="onNavigationLeft"
        >
            <image
                v-if="backType === 1"
                :src="getImageURL('navigationBar/back_black.png')"
            />
            <image
                v-if="backType === 2"
                :src="getImageURL('navigationBar/back_white.png')"
            />
        </view>

        <view
            class="navigation-title flex align-center just-center"
            :class="
                bgType === 1
                    ? 'blackColor'
                    : bgType === 2
                    ? 'whiteColor'
                    : 'whiteColor'
            "
        >
            {{ navigationTitle }}
        </view>
    </view>
    <!-- #endif -->
</template>

<script>
export default {
    props: {
        /**
         * 返回键的状态
         * 0:不显示返回按钮 1:黑色 2:白色
         */
        backType: {
            type: Number,
            default: 0,
        },
        /**
         * 标题
         */
        navigationTitle: {
            type: String,
            default: "",
        },
        /**
         * 背景状态
         * 1:白色背景 2:主题颜色背景 3:图片 4:技师的图片 0:透明
         */
        bgType: {
            type: Number,
            default: 2,
        },
        // 是否fixed
        fixed: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            statusHeight: this.$navigationHeight - 45,
        };
    },
    methods: {
        /**
         * 返回
         */
        onNavigationLeft() {
            uni.navigateBack();
        },
    },
};
</script>

<style lang="scss" scoped>
.navigationBar {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    height: 45px;
    z-index: 99;
    overflow: hidden;
    background-color: transparent;

    .bgImg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: -1;
    }

    > view {
        position: absolute;
        bottom: 0;
        height: 45px;
    }
    .navigation-left {
        left: 0;
        width: 45px;

        > image {
            width: 28px;
            height: 28px;
        }
    }

    .navigation-title {
        left: 50px;
        width: calc(100% - 100px);
    }

    .navigation-right {
        right: 0;
        width: 45px;
    }
}
.whiteBgColor {
    background: #ffffff !important;
}
.themeBgColor {
    background: linear-gradient(180deg, #988ad7 0%, #bdb1ef 100%) !important;
}

.blackColor {
    color: #000000;
}
.whiteColor {
    color: #ffffff;
}
</style>
